<template>
  <div class="detail">
    <header class="top">
		<div>
			<van-icon name="arrow-left" size="1.5rem" @click="back"/><span class="title">{{price[1].name}}</span><span>分享</span>
		</div>
		
	</header>
	<section class="container">
		<van-swipe  >  
		  <van-swipe-item v-for="(image, index) in images" :key="index">
		    <img v-lazy="image" />
		  </van-swipe-item>
		</van-swipe>
		
		<div class="goods-detail">
			<p class="en-name">Blue Monday</p>
			<p class="ch-name">{{price[1].name}}</p>
			<p class="price">￥{{price[0].money}}</p>
			<div class="lable">
				<ul class="lable-list" >
					<li v-for="(v,i) in price[2]" :key="i"><span>{{v}} ></span></li>
				</ul>
			</div>
			<div class="choose">
				<div class="spec" @click="showPopup"><span>已选择: {{price[0].g}}({{price[0].b}})</span><van-icon name="arrow" /></div>
				<div class="other">
					<ul>
						<li><van-icon name="orders-o" /> <span>{{price[0].cm}}cm</span></li>
						<li><van-icon name="friends-o" /> <span>适合{{price[0].people}}分享</span></li>
						<li><van-icon name="gift-o" /> <span>含{{price[0].num}}套餐具(蜡烛需要单独订购)</span></li>
						<li><van-icon name="underway-o" /> <span>最早今天18:00配送</span></li>
					</ul>
				</div>
				<div class="reference">
					<div><van-icon name="goods-collect-o" /><span>保温条件</span><span>0——4° 冷藏12小时，5℃食用最佳</span></div>
					<div><van-icon name="smile-o" /><span>推荐糖度</span><span><van-icon name="smile-o" /><van-icon name="smile-o" /><van-icon name="smile-o" /><van-icon name="smile-o" /><van-icon name="smile-o" /></span></div>
				</div>
			</div>
			
		</div>
		<div class="symbol">
			<p>/草莓配奶油，从王室，前往温布尔登的雨季/</p>
			<p>Now 21cake has encapsulated this gloriously English tradition in square cake form. At Wimbledon, which dates back to 1877, protocol and propriety rule. Players must wear white...</p>
		</div>
		
		<div class="picture-show">
			<ul>
				<li v-for="(v,i) in price[3]" :key="i"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" ></li>
			</ul>
		</div>
		<div class="unsubscribe">
			<p>退改说明：</p>
			
			<p>1. 北京、上海、杭州、广州地区距配送时间5小时及以上的订单可修改、取消、退订；距配送时间不足5小时，订单不再支持修改、取消、退订。（22点之后不接受次日14点之前配送订单修改、退订）</p>
			
			<p>2. 苏州、无锡、深圳、天津距配送时间不足8小时，订单不再支持修改、取消、退订。（22点之后不接受次日16点之前配送订单修改、退订）</p>
		</div>
		
		<div class="recommend">
			<p class="rmd-title">·推荐商品·</p>
			<ul>
				<li v-for="(v,i) in remArr " :key="v.id" @click="pathTo(v.id)">
					<img src="https://img.yzcdn.cn/vant/apple-1.jpg" >
					<div class="box">
						<p>{{v.NAME}}(999包邮)</p>
						<div>
							<span>￥{{v.s_money}}/45g(一个)</span>
							<van-icon name="shopping-cart-o" class="add"/>
						</div>
					</div>
				</li>
				
			</ul>
		</div>
	</section>
	
	<footer>
		<div>
			<van-icon name="shopping-cart-o"/>
		</div>
		<button type="button" @click="showPopup" >立即购买</button>
		<button type="button" @click="addC" class="active">加入购物车</button>
	</footer>
<!-- 	<van-cell is-link >展示弹出层</van-cell> -->
	<van-popup 
	v-model="show"
	position="bottom"
	>
	<div class="model">
		<div class="spec"><span>￥{{price[0].money}}</span></div>
		<div class="other">
			<ul>
				<li><van-icon name="orders-o" /> <span>{{price[0].cm}}cm</span></li>
				<li><van-icon name="friends-o" /> <span>适合{{price[0].people}}分享</span></li>
				<li><van-icon name="gift-o" /> <span>含{{price[0].num}}套餐具(蜡烛需要单独订购)</span></li>
				<li><van-icon name="underway-o" /> <span>最早今天18:00配送</span></li>
			</ul>
		</div>
		<div class="reference">
			<div>产品规格</div>
			<ul>
				<li  v-for="(v,i) in specArr"  @click="change(i)" :class="[i==index ? 'active' : '']" :key="i">
					<i></i>
					<p>{{v.g}}</p>
					<p>({{v.b}})</p>
				</li>
			</ul>
		</div>
	</div>
	
	</van-popup>
  </div>
</template>
<style  lang="less">
@baseFont:20;

*{
	margin: 0;
	padding: 0;
}

li{
	list-style: none;
}
a{
	text-decoration: none;
}
html{
	font-size: @baseFont*1px;
	color: #000000;
}
body{
	background: #f6f6f6;
}



.px2rem(@name,@px){
    @{name}:@px/@baseFont/2*1rem;
}

.detail {
	.top {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999999;
		background-color: #FFFFFF;	
		div {
			height: 5rem;
			font-size: 1.5rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 1.25rem;
			font-weight: 400;
			background: #FFFFFF;	
		}
		
	}
	
	.container {
		background: #f6f6f6;
		margin-top: 5rem;
		margin-bottom: 6.5rem;
		.van-swipe-item {
			img {
				height: 31.75rem;
				width: 100%;
			}
		}
		.van-swipe__indicators {
			.van-swipe__indicator {
				height: 0.75rem;
				width: 0.75rem;
				border-radius: 0;
				background-color: #ffffff;
				margin-left: 0.7rem;
			}
			.van-swipe__indicator--active {
				background-color: #000000;
			}
		}
		
		.goods-detail {
			background: #FFFFFF;
			padding: 1rem 1.8rem;
			margin-bottom: 1.25rem;
			.en-name {
				font-size: 2.5rem;
			}
			.ch-name {
				font-size: 1.3rem;
			}
			.price {
				font-size: 1.6rem;
				color: #c29765;
				margin-top: 0.5rem;
				margin-bottom: 0.5rem;
			}
			.lable {
				
				
				.lable-list {
					display: flex; 
					overflow: hidden;
					li {
						margin-right: 0.5rem;
						padding: 0.1rem 1.25rem;
						border: 1px solid #dccbb8;
						border-radius: 10px;
						color: #dccbb8;
						font-size: 1rem;
					}
				}
			}
			
			.choose {
				border-radius: 5px;
				box-shadow:0 0 3px 1px #dccbb878;
				overflow: hidden;
				margin-top: 1rem;
				.spec {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 4rem;
					font-size: 1.3rem;
					background: #f4f1ec;
					padding:  0 1.3rem;
				}
				
				.other {
					ul {
						display: flex;
						flex-wrap: wrap;
						margin:  0 1.3rem;
						padding-bottom: 1rem;
						border-bottom: 1px solid #c6c6c6;
						li {
							width: 50%;
							padding-top: 1rem;
							font-size: 1.2rem;
							i {
								vertical-align: middle;
								font-size: 1.2rem;
							}
						}
					}
				}
				
				.reference {
					margin:  1rem 1.3rem;
					div {
						font-size: 1.2rem;
						color: #909090;
						span {
							margin-left: 1.2rem;
							display: inline-block;
							
							height: 2rem;
							line-height: 2rem;
						}
						i {
							vertical-align: middle;
							font-size: 1.2rem;
						}
					}
				}
			}
			
			
		}
		.symbol {
			background: #FFFFFF;
			padding: 1.2rem 1.8rem;
			overflow: hidden;
			text-align: center;
			margin-bottom: 1.25rem;
		}
		.picture-show {
			background-color: #FFFFFF;
			ul {
				padding: 1.3rem;
				li {
					img {
						height: 38rem;
						width: 100%;
					}
					
				}
			}
		}
		.unsubscribe {
			color: #888888;
			padding-top: 0.25rem;
		}
		
		.recommend {
			margin-top: 5.5rem;
			.rmd-title {
				height: 3rem;
				line-height: 3rem;
				text-align: center;
			}
			ul {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 2.25rem;
				li {
					width: 18.5rem;
					background: #FFFFFF;
					margin-top: 0.5rem;
					img {
						height: 11rem;
						width: 100%;
						background-size: 100% 100%;
					}
					.box {
						padding: 0 1.5rem;
						p {
							text-align: left;
						}
						div {
							display: flex;
							justify-content: space-between;
							height: 2.5rem;
							line-height: 2.5rem;
							margin-bottom: 1rem;
							.add {
								font-size: 2.2rem;
								color: #532d18;
							}
						}
					}
				}
			}
		}
		
	}
	
	footer {
		height: 5rem;
		display: flex;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999999;
		background: #FFFFFF;
		overflow: hidden;
		div {
			height: 100%;
			display: flex;
			font-size: 1.5rem;
			width: 10%;
			justify-content: center;
			align-items: center;
		}
		button {
			width: 45%;
			background: #FFFFFF;
			border: none;
			&.active {
				background: #000000;
				color: #FFFFFF;
			}
		}
	}
	
	.model {
		padding: 1.35rem 2rem;
		.spec {
			color: #ff6f4a;
			font-size: 1.2rem;
		}
		.other {
			ul {
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 1rem;
				li {
					width: 50%;
					padding-top: 1rem;
					font-size: 1rem;
					i {
						vertical-align: middle;
						display: inline-block;
						font-size: 1rem;
					}
				}
			}
		}
		.reference {
			margin-bottom: 4rem;
			div {
				margin-bottom: 1rem;
			}
			
			ul {
				display: flex;
				
				li {
					height: 3rem;
					width: 7.5rem;
					background: #f7f7f7;
					margin-right: 0.7rem;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					&.active {
						border: 1px solid #000000;
						position: relative;
						i {
							background: url(../assets/wsx-img/icon%202.png)no-repeat;
							background-position: 0px -40px;
							background-size: 310px 120px;
							display: block;
							height: 10px;
							width: 10px;
							position: absolute;
							top: -1px;
							left: -1px;
						}	
					}
				}
			}
		}
		
	}
}

</style>
<script type="text/javascript">
	import Vue from 'vue'
	import { Icon,Swipe, SwipeItem,Lazyload,Popup } from 'vant';
	import 'vant/lib/index.css';
	import axios from 'axios';


	Vue.use(Icon);
	Vue.use(Swipe);
	Vue.use(SwipeItem);
	Vue.use(Lazyload);
	Vue.use(Popup);
	
	
	export default {
	  data() {
	    return {
	      images: [
	        
	      ],
		  show: false,
		  specArr:[],
		  price:[{money:'',num:'',people:'',cm:'',g:'',b:''},{name:''},[],[]],
		  index:0,
		  goodsArr:[],
		  goodsId:1,
		  unit:[],
		  remArr:[],
		  localArr:[],
		  goodNum:1,
		  weigth:'',
		  add:0,
		  isAdd:true
	    }
	  },
	  methods: {
	      showPopup() {
	        this.show = true;
	      },
		  addC(){
			  if(this.show == false){
			  	this.add = 0;
			  }
			  this.add ++;
			  if(this.add > 1){
			  	this.localArr = JSON.parse(localStorage.getItem('waresLists')) || [];
			  	this.setLocalStorage(this.localArr)
			  }
			 
			  this.showPopup()
		  },
		  toCart(){
			  if(this.show == false){
			  	this.add = 0;
			  }
			  this.add ++;
			  if(this.add > 1){
			  	this.localArr = JSON.parse(localStorage.getItem('waresLists')) || [];
			  	this.setLocalStorage(this.localArr)
				 this.$router.push({path:"/ShoppingCar"});
			  }
			 
			  this.showPopup()
		  },
		  change(i) {
			  this.index = i;
			  this.weigth = this.specArr[i].g+'('+this.specArr[i].b+')';
			  this.price[0] = {
				  money:this.specArr[i].m,
				  num:this.specArr[i].n,
				  people:this.specArr[i].p,
				  cm:this.specArr[i].c,
				  g:this.specArr[i].g,
				  b:this.specArr[i].b
			   };
		  },
		  labelFn(id) {
			  this.goodsArr.forEach( (v,i) => {
			  	if(v.id == id){
					this.price[1].name =  v.NAME;
					if(v.popularity != 0 ){
						this.price[2].push('流行');
					}
					if(v.new != 0 ){
						this.price[2].push('最新');
					}
					if(v.season != 0 ){
						this.price[2].push('时节');
					}
					if(v.star != 0 ){
						this.price[2].push('明星');
					}
					if(v.discount != 0 ){
						this.price[2].push('折扣');
					}
				}
			  })
		  },
		  unitFN(id) {
			  this.unit.forEach((v,i)=>{
				  let l = v.s_length;
				  for(var i = 0;i < l; i++) {
				  	if(v.s_unit == '个') {				
				  		this.specArr[i] = {c:((i+1)*10-i*6)+'x'+((i+1)*10-i*6),g:(i+1) * parseInt(v.s_size)+'g',b:(i+1)+'个',m:(i+1)*v.money+'.00',n:(i+1)*5,p:(i+1)*4-1+'-'+(i+1)*4};
				  	}else if(v.s_unit == '磅') {
				  		this.specArr[i] = {c:((i+1)*10-i*6)+'x'+((i+1)*10-i*6),g:(i+1) * parseInt(v.s_size)+'g',b:(i+1)+'.0磅',m:(i+1)*v.money+'.00',n:(i+1)*5,p:(i+1)*4-1+'-'+(i+1)*4};
				  	}else if(v.s_unit == '份'){
				  		this.specArr[i] = {c:((i+1)*10-i*6)+'x'+((i+1)*10-i*6),g:(i+1) * parseInt(v.s_size)+'g',b:(i+1)+'份',m:(i+1)*v.money+'.00',n:(i+1)*5,p:(i+1)*4-1+'-'+(i+1)*4};
				  	}
				  }		
			  })
				
		  },
		  pathTo(id) {
			  this.$router.push({ path:"/Detail?goodsID="+id+"",query:{goodsID:id}});
			  this.$router.go(0)
		  },
		  back() {
			 this.$router.back()
		  },
		  setLocalStorage(arr) {
			  let Arr = JSON.stringify(this.localArr);
			  let Arr2 = JSON.parse(Arr);
			  if(Arr2 == 0) {
			  	  Arr2.push({goods_id:this.goodsId,goods_num:this.goodNum,weight:this.weigth});
			  	  localStorage.setItem('waresLists',JSON.stringify(Arr2));
			  }else {
				   let flag = true;
				   Arr2.forEach((v,i)=>{
					   if(v.goods_id == this.goodsId && v.weight == this.weigth){
						   v.goods_num +=1;
						   localStorage.setItem('waresLists',JSON.stringify(Arr2));
						   flag = false;
					   }
				   })	
					if(flag) {
						Arr2.push({goods_id:this.goodsId,goods_num:this.goodNum,weight:this.weigth});
						localStorage.setItem('waresLists',JSON.stringify(Arr2));
					}		
			  } 			  
		  }
	  },
	  created() {

	  	axios.get('/getGoods')
	  	  .then((res) =>{
			this.goodsArr = res.data.data;
	  	  })
	  	  .catch(function (error) {
	  	    console.log(error);
	  	  });
		  
		  axios.get('/getRecommond')
		    .then((res) =>{
		  	this.remArr = res.data.data;
		    })
		    .catch(function (error) {
		      console.log(error);
		    });
		  
		  axios.get('/getPictures')
		    .then((res) =>{
				res.data.data.forEach((v,i)=>{
					if(v.state == 1 && v.g_id == 3){
						this.images.push(v.picture);
					}else if(v.state == 2 && v.g_id == 3){
						this.price[3].push(v);
					}		
				})
		    })
		    .catch(function (error) {
		      console.log(error);
		    });
			axios.get("/getSize?id="+this.goodsId+"")
			  .then((res) =>{
					this.goodsId =parseInt(this.$route.query.goodsID)
					console.log(this.goodsId)
					this.unit = res.data.data;
					this.unitFN(this.goodsId);
					this.labelFn(this.goodsId);
					this.change(0);
					
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
			 
	  }
	  
	  
	  
	}
</script>